Color & contrast 顏色與對比度

顏色和對比度可以幫助使用者清晰識別介面內容。選擇原色、間色和強調色來提升可用性。元素之間足夠的色彩對比度有助於視力不佳的使用者看清並使用你的應用程式。

顏色對比度是指兩種顏色之間的亮度差異，通常以1:1到21:1之間的數值表示。

對比度計算工具：https://coolors.co/contrast-checker/112a46-acc8e5

Contrast Ratios 對比度比率：W3C 推薦的對比度標準

• 大文字 (14pt 粗體 / 18pt 正常及以上) 和圖形：至少 3:1

• 小文字 (普通正文)：至少 4.5:1

• 禁用狀態 的元素不需要滿足對比度要求。

Clustering Elements 元素聚類

某些非文字元素（如按鈕容器）需要至少 3:1 的對比度，以便與背景區分。

Standalone Components 獨立元件

浮動操作按鈕 (FAB, Floating Action Button) 由於本身突出，不需要滿足 3:1 的對比度標準。

Component Grouping 元件組合

在 多個元件組合 (Clustered Components) 時，每個元件 都需要達到 3:1 的對比度，以確保清晰度。低對比度的按鈕在 UI 中難以區分，而高對比度的按鈕則能夠更清晰地呈現互動邏輯。